<!-- scaleBox + flex布局 -->

<template>
	<div class="contain">
		<div class="left cover flex fd-column gap-10  my-animation-slide-right">
			<div class="left-title flex ai-center fd-column p-lr-10">
				<div class="bg bg_active  flex ai-center  jc-center ">
					<span>道路交通拥堵排行</span>
				</div>
				<div class="flex gap-10 ">
					<span class="bg bg_active flex-1 flex ai-center  jc-center ">路段</span>
					<span class="bg flex-1 flex ai-center jc-center ">交叉口</span>
				</div>
			</div>
			<div class="title">
				<span class="tip"></span>
				<span>这是一个标题</span>
			</div>
			<div class="date flex ai-center jc-around gap-10">
				<span>2023.1</span>
				<span>2023.2</span>
				<span>2023.3</span>
				<span>2023.4</span>
				<span>2023.5</span>
				<span class="active">2023.6</span>
			</div>
			<div class="rateChange flex-1">
				<el-table :data="tableData" height="560">
					<el-table-column type="index" label="排名" width="50">
					</el-table-column>
					<el-table-column prop="date" label="日期">
					</el-table-column>
					<el-table-column prop="name" label="地址" width="100">
					</el-table-column>
					<el-table-column label="幅度">
						<template slot-scope="scope">
							<span style="color: aqua !important;padding-right: 10px;">{{ scope.row.address }}</span>
							<i class="el-icon-top" style="color: red !important; "></i>
						</template>
					</el-table-column>
				</el-table>
				<span class="rate-title ">xxxxxxxxxxx变化率</span>
				<div class="rate-list flex jc-between p-lr-10">
					<div class="flex fd-column">
						<span class="rate-item-num p-10 m-b-10">&gt;=90%</span>
						<span class="rate-item-color" style="border: 4px solid green;background: green;"></span>
					</div>

					<div class="flex fd-column">
						<span class="rate-item-num p-10 m-b-10">90%~70%</span>
						<span class="rate-item-color" style="border: 4px solid greenyellow;background: greenyellow;"></span>
					</div>

					<div class="flex fd-column">
						<span class="rate-item-num p-10 m-b-10">70%~50%</span>
						<span class="rate-item-color" style="border: 4px solid yellow;background: yellow;"></span>
					</div>

					<div class="flex fd-column">
						<span class="rate-item-num p-10 m-b-10">50%~30%</span>
						<span class="rate-item-color" style="border: 4px solid orange;background: orange;"></span>
					</div>

					<div class="flex fd-column">
						<span class="rate-item-num p-10 m-b-10">&lt;=30%</span>
						<span class="rate-item-color" style="border: 4px solid red;background: red;"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="right cover flex fd-column gap-10  my-animation-slide-left">
			<div class="flex-1 flex fd-column gap-10">
				<div class="title">
					<span class="tip"></span>
					<span>这是一个标题</span>
				</div>
				<div class="e-card flex-1 flex fd-column p-40">
					<div class="flex-1 flex ai-center jc-between  ">
						<div class="img p-10">
							<!-- <img src="@/assets/images/启动.png" alt="" width="80" height="80"> -->
						</div>
						<div class="flex-1 flex jc-around fd-column tongji">
							<span class="fs-20">xxxxxx</span>
							<div class="flex jc-between">
								<span><span class="fs-24  p-r-10 coloraqua">1222</span>个</span>
								<span>占比<span class="fs-24 p-lr-10 coloraqua">23</span>%</span>
							</div>
						</div>
					</div>
					<div class="flex-1 flex ai-center jc-between " style="  border-top: 1px solid rgba(8, 79, 147, 0.6);">
						<div class="img p-10">
							<!-- <img src="@/assets/images/启动.png" alt="" width="80" height="80"> -->
						</div>
						<div class="flex-1 flex jc-around fd-column tongji">
							<span class="fs-20">xxxxxx</span>
							<div class="flex jc-between">
								<span><span class="fs-24  p-r-10 coloraqua">1222</span>个</span>
								<span>占比<span class="fs-24 p-lr-10 coloraqua">23</span>%</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex-1 flex fd-column gap-10">
				<div class="title">
					<span class="tip"></span>
					<span>这是一个标题</span>
				</div>
				<div class="e-card flex-1  flex fd-column p-40 gap-20">
					<div class="flex-1 flex fd-column   jc-between">
						<div class="flex jc-between ai-center">
							<span class="fs-20">男性总人数</span>
							<span class="fs-14 ">2031-12-12 12:45:32</span>
						</div>
						<div class="flex jc-between ai-center">
							<div></div>
							<div>
								<span class="coloraqua fs-20 p-r-10">1234</span>人
							</div>
						</div>
					</div>
					<div class="flex-1 flex fd-column   jc-between">
						<div class="flex jc-between ai-center">
							<span class="fs-20">女性总人数</span>
							<span class="fs-14 ">2031-12-12 12:45:32</span>
						</div>
						<div class="flex jc-between ai-center">
							<div></div>
							<div>
								<span class="coloraqua fs-20 p-r-10">1234</span>人
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flex-1 flex fd-column gap-10">
				<div class="title">
					<span class="tip"></span>
					<span>这是一个标题</span>
				</div>
				<div class="e-card flex-1">
					<bar1Chart />
				</div>
			</div>
		</div>
		<div class="bottom e-card my-animation-slide-bottom">
			<line2Chart />
		</div>
	</div>
</template>

<script>
import scaleScreen from "@/components/scaleScreen";

import line1Chart from "@/views/echart/lineChart/line1";
import line2Chart from "@/views/echart/lineChart/line2";
import bar1Chart from "@/views/echart/barChart/bar1";
import bar2Chart from "@/views/echart/barChart/bar2";
import bar3Chart from "@/views/echart/barChart/bar3";
import gauge1Chart from "@/views/echart/gaugeChart/gauge1";
import gauge2Chart from "@/views/echart/gaugeChart/gauge2";
import pie1Chart from "@/views/echart/PieChart/pie1";
import pie2Chart from "@/views/echart/PieChart/pie2";
import radar1Chart from "@/views/echart/radarChart/radar1";

export default {
	components: {
		scaleScreen,
		line1Chart,
		line2Chart,
		bar1Chart,
		bar2Chart,
		bar3Chart,
		gauge1Chart,
		gauge2Chart,
		pie1Chart,
		pie2Chart,
		radar1Chart,
	},
	data() {
		return {
			tableData: [{
				date: '2016-05-02',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-04',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-01',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-03',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-02',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-04',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-01',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-03',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-02',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-04',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-01',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-03',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-02',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-04',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-01',
				name: '北京',
				address: '70'
			}, {
				date: '2016-05-03',
				name: '北京',
				address: '70'
			}]
		};
	},

	mounted() {
	},
	methods: {
		toPage(path) {
			console.log('path :>> ', path);
			this.$router.push(path)
		}
	},
};
</script>

<style scoped lang="scss">
.e-card {
	// border: 2px solid;
	// border-image: linear-gradient(to right, #917667, #578aef) 1;
	background: #1f406480;
	border-radius: 5px;
}

.contain {
	color: #fff;

	.title {
		height: 50px;
		padding: 10px;
		background: #1f406480;
		box-shadow: 2px 2px 4px rgba(0, 21, 41, 0.08);
		display: flex;
		align-items: center;
		border-radius: 5px;
		color: #fff;

		.tip {
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-left-color: #37daea;
			display: block;
		}
	}

	.left-title {
		border-radius: 5px;
		background: #1f406480;
		box-shadow: 2px 2px 4px rgba(0, 21, 41, 0.08);

		&>div {
			width: 100%;
			margin: 10px;
		}

		.bg {
			width: 100%;
			background: #393d41d4;
			padding: 5px;

			&_active {
				border-top: 2px solid #37daea;
			}
		}

	}

	.date {
		height: 50px;
		background: #1f406480;
		box-shadow: 2px 2px 4px rgba(0, 21, 41, 0.08);
		border-radius: 5px;

		.active {
			color: #37daea;
		}
	}

	.rateChange {
		background: #1f406480;

		.rate-title {
			display: block;
			padding: 20px 10px;
		}

		.rate-list {

			&>div {

				.rate-item-num {

					background: #1f406480;
				}

				.rate-item-color {

					border-radius: 4px;
				}
			}
		}
	}

	.cover {
		position: absolute;
		width: 25%;
		height: calc(100% - #{$base-header-height} - 40px);
		bottom: 20px;
	}

	.left {
		left: 10px;
	}

	.right {
		right: 10px;

		.tongji {
			height: 100%;
		}


		.coloraqua {
			color: aqua;
		}
	}

	.bottom {
		width: calc(50% - 40px);
		bottom: 20px;
		left: calc(25% + 10px + 10px);
		position: absolute;
		height: calc(28% + 4px);
	}
}
</style>
